$(function () {
    $.ajax({
        type : 'POST',
        url : 'apilog/lastMonthStatistics',
        data : {        },
        dataType : "json",
        success : function(result){
            if (result.success) {
                lineChartInit(result)
                pieChartInit(result);
            } else {
                layer.open({
                    title: '系统提示',
                    content: (result.msg || 'API调用报表数据加载异常'),
                    icon: '2'
                });
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {  
            console.log(xhr.status + ": " + thrownError);  
        }  
    });

    /**
     * 折线图
     */
    function lineChartInit(result) {
        var option = {
               title: {
                   text: '日期分布图'
               },
               tooltip : {
                   trigger: 'axis',
                   axisPointer: {
                       type: 'cross',
                       label: {
                           backgroundColor: '#6a7985'
                       }
                   }
               },
               legend: {
                   data:['成功调用次数','失败调用次数']
               },
               toolbox: {
                   feature: {
                       /*saveAsImage: {}*/
                   }
               },
               grid: {
                   left: '3%',
                   right: '4%',
                   bottom: '3%',
                   containLabel: true
               },
               xAxis : [
                   {
                       type : 'category',
                       boundaryGap : false,
                       data : result.data.apiCallDayList
                   }
               ],
               yAxis : [
                   {
                       type : 'value'
                   }
               ],
               series : [
                   {
                       name:'成功调用次数',
                       type:'line',
                       stack: '总量',
                       areaStyle: {normal: {}},
                       data: result.data.apiCallDayCountSucList
                   },
                   {
                       name:'失败调用次数',
                       type:'line',
                       stack: '总量',
                       label: {
                           normal: {
                               show: true,
                               position: 'top'
                           }
                       },
                       areaStyle: {normal: {}},
                       data: result.data.apiCallDayCountFailList
                   }
               ],
                color:['#00A65A', '#dd4b39']
        };

        var lineChart = echarts.init(document.getElementById('lineChart'));
        lineChart.setOption(option);
    }

    /**
     * 饼图
     */
    function pieChartInit(result) {
        var option = {
            title : {
                text: '',
                /*subtext: 'subtext',*/
                x:'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['成功调用次数','失败调用次数']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {
                            value:result.data.apiCallCountSucTotal,
                            name:'成功调用次数'
                        },
                        {
                            value:result.data.apiCallCountFailTotal,
                            name:'失败调用次数'
                        }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            color:['#00A65A', '#dd4b39']
        };
        var pieChart = echarts.init(document.getElementById('pieChart'));
        pieChart.setOption(option);
    }
    
    function gauge(domId,title,type){
    	// 指定图表的配置项和数据
    	var option = {
    			title: {
    				text: title, //标题文本内容
    				   x:'center'
    			},
    			toolbox: { //可视化的工具箱
    				show: false,
    				feature: {
    					restore: { //重置
    						show: false
    					},
    					saveAsImage: {//保存图片
    						show: false
    					}
    				}
    			},
    			tooltip: { //弹窗组件
    				formatter: "{a} <br/>{b} : {c}%"
    			},
    			series: [{
    				name: title,
    				type: 'gauge',
    				detail: {formatter:'{value}%'},
    				data: [{value: '0.00', name: '使用率'}]
    			}]
    			
    	};
    	var myChart = echarts.init(document.getElementById(domId));
    	// 使用刚指定的配置项和数据显示图表。
    	myChart.setOption(option);
    	return myChart;
    }
    
    var main1Chart = gauge("main1","I类短网址",1);
    var main2Chart = gauge("main2","II类短网址",2);
    var main3Chart = gauge("main3","III类短网址",3);
    var main4Chart = gauge("main4","IV类短网址",4);
    var main5Chart = gauge("main5","V类短网址",5);
    setInterval(function(){//把option.series[0].data[0].value的值使用random()方法获取一个随机数
		 $.ajax({
		        type : 'GET',
		        url : 'short-url/all-rates',
		        data : {},
		        dataType : "json",
		        success : function(result){
		            if (result.success) {
		            	var option1 = main1Chart.getOption();
		            	option1.series[0].data[0].value = result.data['One'];
		            	main1Chart.setOption(option1, true);
		            	var option2 = main2Chart.getOption();
		            	option2.series[0].data[0].value = result.data["Two"];
		            	main2Chart.setOption(option2, true);
		            	var option3 = main3Chart.getOption();
		            	option3.series[0].data[0].value = result.data['Three'];
		            	main3Chart.setOption(option3, true);
		            	var option4 = main4Chart.getOption();
		            	option4.series[0].data[0].value = result.data['Four'];
		            	main4Chart.setOption(option4, true);
		            	var option5 = main5Chart.getOption();
		            	option5.series[0].data[0].value = result.data['Five'];
		            	main5Chart.setOption(option5, true);
		            } else {
		            	alert(result.msg || '使用率查询失败', function(){
		            		if(result.code == 9986){
		            			window.location.reload();
		            		}
						});
		            }
		        },
		        error: function (xhr, ajaxOptions, thrownError) {  
		        	window.location.reload();
		            console.log(xhr.status + ": " + thrownError);  
		        }  
		    });
	}, 5000);
     
});
